<!--<template>-->
<!--  <div class="json-formatter">-->
<!--    <div v-if="jsonData" class="json-container" ref="jsonContainer"></div>-->
<!--    <div v-else class="empty-message">No JSON data provided</div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  name: 'JsonFormatter',-->
<!--  props: {-->
<!--    jsonData: {-->
<!--      type: [Object, Array],-->
<!--      required: true-->
<!--    },-->
<!--    indent: {-->
<!--      type: Number,-->
<!--      default: 2-->
<!--    }-->
<!--  },-->
<!--  watch: {-->
<!--    jsonData: {-->
<!--      handler(newVal) {-->
<!--        this.$nextTick(() => {-->
<!--          this.formatJson(newVal, this.$refs.jsonContainer);-->
<!--        });-->
<!--      },-->
<!--      immediate: true,-->
<!--      deep: true-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    formatJson(data, container) {-->
<!--      // 清空容器-->
<!--      while (container.firstChild) {-->
<!--        container.removeChild(container.firstChild);-->
<!--      }-->

<!--      if (typeof data === 'object' && data !== null) {-->
<!--        const isArray = Array.isArray(data);-->
<!--        const wrapper = document.createElement('div');-->
<!--        const collapsible = document.createElement('span');-->
<!--        collapsible.className = 'collapsible';-->
<!--        collapsible.textContent = isArray ? '[' : '{';-->
<!--        wrapper.appendChild(collapsible);-->

<!--        const content = document.createElement('div');-->
<!--        content.className = 'collapsible-content';-->

<!--        const keys = isArray ? data : Object.keys(data);-->
<!--        keys.forEach((key, index) => {-->
<!--          const item = document.createElement('div');-->
<!--          const keyElement = !isArray ? document.createElement('span') : null;-->

<!--          if (!isArray) {-->
<!--            keyElement.className = 'key';-->
<!--            keyElement.textContent = `"${key}": `;-->
<!--            item.appendChild(keyElement);-->
<!--          }-->

<!--          const value = isArray ? key : data[key];-->
<!--          if (typeof value === 'object' && value !== null) {-->
<!--            this.formatJson(value, item);-->
<!--          } else {-->
<!--            const valueElement = document.createElement('span');-->
<!--            let valueType = 'string';-->

<!--            if (typeof value === 'number') valueType = 'number';-->
<!--            else if (typeof value === 'boolean') valueType = 'boolean';-->
<!--            else if (value === null) valueType = 'null';-->

<!--            valueElement.className = valueType;-->
<!--            valueElement.textContent = typeof value === 'string'-->
<!--                ? `"${value}"`-->
<!--                : value;-->
<!--            item.appendChild(valueElement);-->
<!--          }-->

<!--          if (index < keys.length - 1) {-->
<!--            const comma = document.createElement('span');-->
<!--            comma.textContent = ',';-->
<!--            item.appendChild(comma);-->
<!--          }-->

<!--          content.appendChild(item);-->
<!--        });-->

<!--        const closingBracket = document.createElement('span');-->
<!--        closingBracket.textContent = isArray ? ']' : '}';-->
<!--        content.appendChild(closingBracket);-->

<!--        wrapper.appendChild(content);-->
<!--        container.appendChild(wrapper);-->

<!--        // 添加折叠/展开功能-->
<!--        collapsible.addEventListener('click', function() {-->
<!--          this.classList.toggle('collapsed');-->
<!--          content.classList.toggle('hidden');-->
<!--        });-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.json-formatter {-->
<!--  font-family: Consolas, monospace;-->
<!--  background-color: #282c34;-->
<!--  color: #abb2bf;-->
<!--  padding: 20px;-->
<!--  border-radius: 5px;-->
<!--}-->

<!--.json-container {-->
<!--  background-color: #1e2127;-->
<!--  padding: 15px;-->
<!--  border-radius: 5px;-->
<!--  overflow-x: auto;-->
<!--}-->

<!--.empty-message {-->
<!--  color: #e06c75;-->
<!--  padding: 10px;-->
<!--}-->

<!--.key {-->
<!--  color: #e06c75;-->
<!--}-->

<!--.string {-->
<!--  color: #98c379;-->
<!--}-->

<!--.number {-->
<!--  color: #d19a66;-->
<!--}-->

<!--.boolean {-->
<!--  color: #61afef;-->
<!--}-->

<!--.null {-->
<!--  color: #be5046;-->
<!--}-->

<!--.collapsible {-->
<!--  cursor: pointer;-->
<!--}-->

<!--.collapsible::before {-->
<!--  content: "▼ ";-->
<!--  font-size: 0.8em;-->
<!--  color: #61afef;-->
<!--}-->

<!--.collapsible.collapsed::before {-->
<!--  content: "▶ ";-->
<!--}-->

<!--.hidden {-->
<!--  display: none;-->
<!--}-->
<!--</style>-->
